import React from 'react';
import { View, Image, TouchableWithoutFeedback } from 'react-native';
import { Lt, Color, Nav, Label, Jpp, Jx, Images, Dialog, Flist } from "../_utils";
import { Net, NET_NT } from "../_net"
import Video from "react-native-video"
import VideoPlayer from './VideoPlayer';

class Video2 extends React.PureComponent{
    constructor(props){
        super(props);
        this.video = null;
        this.begin = false;
        this.state = {
            paused:true,
        }
        this.onClick = this.onClick.bind(this);
        this.onProgress = this.onProgress.bind(this);
        this.onEnd = this.onEnd.bind(this);
    }
    onClick(){
        this.setState({paused: !this.state.paused});
        if(this.begin && this.video){
            this.video.seek(0)
            // this.video.presentFullscreenPlayer();
        }
    }
    onProgress = (data) => {
        return;
        if(this.first && this.video && this.state.paused){
            this.setState({paused: true});
            this.video.seek(3);
            this.first = false;
        }
    };
    onEnd(){
        this.setState({paused: true});
        this.begin = true;
        // this.video && this.video.dismissFullscreenPlayer();
    }
    render(){
        const {uri, title, date} = this.props;
        const width = Jpp.width - Lt.margin * 2;
        const height = width * 9 / 16;
        const { paused } = this.state;
        const shadow = {shadowColor:"black", shadowOpacity:0.1,shadowOffset:{width:2, height:2},shadowRadius:Lt.radiu2}
        return <View style={{backgroundColor:"white", borderRadius:Lt.radiu2, margin:Lt.margin, ...shadow}}>
            <View style={{position:"absolute", width, height, borderTopLeftRadius:Lt.radiu2, borderTopRightRadius:Lt.radiu2, backgroundColor:"#F3E6F6",...shadow}}/>
            <TouchableWithoutFeedback onPress={this.onClick}><View>
                <Video
                    ref={r=>this.video=r}
                    source={uri}
                    style={{width, height, borderTopLeftRadius:Lt.radiu2, borderTopRightRadius:Lt.radiu2}}
                    resizeMode = {"contain"}
                    paused={paused}
                    onProgress={this.onProgress}
                    onEnd={this.onEnd}
                    // fullscreen={true}
                />
                {
                    paused ? 
                    <View style={{width, height, position:"absolute", justifyContent:"center"}}>
                        <Image source={Images.zanting} style={{alignSelf:"center"}}/>
                    </View> : null
                }
            </View></TouchableWithoutFeedback>
            <Label style={{fontSize:Lt.c16, color:Color.c3, marginLeft:Lt.margin, marginTop:Lt.margin}}>{title}</Label>
            <Label style={{color:Color.c9, margin:Lt.margin, alignSelf:"flex-end"}}>{Jx.toDate(date)}</Label>
        </View>
    }
}

// 视频教程
export class Tutorial extends React.PureComponent{
    constructor(props){
        super(props);

        this.player = null;
        this.onLoad = this.onLoad.bind(this);
        this.onItem = this.onItem.bind(this);
    }
    static navigationOptions = {
        ...Nav.options,
        headerTitle: Jpp.gameName + "教程",
    }

    onClick(data){
        
    }
    onLoad(params){
        Net.request("advice/tutorial", params.pagination, {params, NET_NT}).then(r=>{
            if(r.data){
                params.add(r.data.pageData);
            }else{
                params.add();
            }
        });
    }
    onItem(params){
        const item = params.item;
        return  <Video2
            uri={{uri:item.video}}
            title = {item.title}
            date = {item.createtime}
        />
    }
    render(){
        return <View style = {{flex:1, backgroundColor:Color.back}}>
            <Nav.StatusBar/>
            <Flist 
                onLoad = {this.onLoad}
                onItem = {this.onItem}
            />
            {/* <VideoPlayer ref={r=>this.player=r}/> */}
        </View>;
    }
}